import React, { FC } from 'react'
import { TableProps, ColumnType } from './interface'
function classNames(...names: (string | undefined)[]) {
  const currentNames: string[] = []
  names.forEach((name: (string | undefined)) => {
    if (name) currentNames.push(name)
  })
  return currentNames.join(' ')
}

// function getFixedColumns(columns: ColumnType[]) {
//   const total: number = columns.length
//   const leftFixedColumns: number[] = []
//   const rightFixedColumns: number[] = []
//   if (columns[0].fixed) {
//     // eslint-disable-next-line no-plusplus
//     for (let i = 0; i < total; i++) {
//       if (columns[i].fixed) {
//         leftFixedColumns.push(i)
//       } else {
//         break
//       }
//     }
//   }
//   if (columns[total - 1].fixed) {
//     // eslint-disable-next-line no-plusplus
//     for (let i = total - 1; i >= 0; i--) {
//       if (columns[i].fixed) {
//         if (!leftFixedColumns.includes(i)) rightFixedColumns.push(i)
//       } else {
//         break
//       }
//     }
//   }
//   return [leftFixedColumns, rightFixedColumns]
// }
//
// function renderCols(columns: ColumnType[]) {
//   return columns.map((column: ColumnType, index: number) => {
//     const width: number = column.width || 50
//     return (
//       <col
//         key={index}
//         style={{ width: width, minWidth: width }}
//       />
//     )
//   })
// }
//
// function renderCells(columns: ColumnType[], leftFixedColumns: number[], rightFixedColumns: number[], record: any) {
//   return columns.map((column: ColumnType, index: number) => {
//     const align: any = column.align || undefined
//     // eslint-disable-next-line no-nested-ternary
//     const fixed: string = leftFixedColumns.includes(index) ? 'left' : (rightFixedColumns.includes(index) ? 'right' : '')
//     const className: string = classNames('st-table-cell', column.className, fixed ? ('st-table-cell-fix-' + fixed) : '')
//     const rawValue: any = (column.dataKey && column.dataKey in record) ? record[column.dataKey] : undefined
//     let value: any
//     if (column.render) {
//       value = column.render(rawValue, record, index)
//     } else {
//       value = (rawValue === undefined || rawValue === null) ? '' : String(rawValue)
//     }
//     return (
//       <td
//         key={index}
//         className={className}
//         style={{ textAlign: align }}
//       >
//         {value}
//       </td>
//     )
//   })
// }
const ScrollableTable: FC<TableProps> = (props) => {
  const style: React.CSSProperties = props.style || {}
  // const maxHeight: string = props.width ? (props.height + 'px') : 'unset'
  const columns: ColumnType[] = props.columns || []
  // const dataSource: any[] = props.dataSource || []

  let maxWidth: number = 0
  if (props.width) style.width = props.width
  if (columns.length === 0) {
    columns.push({
      dataKey: 'key'
    })
  }
  columns.forEach((column: ColumnType) => {
    const width: number = column.width || 50
    maxWidth += width
  })

  // const fixedColumns: number[][] = getFixedColumns(columns)
  // const leftFixedColumns: number[] = fixedColumns[0]
  // const rightFixedColumns: number[] = fixedColumns[1]

  // const tableBody: any = useRef()
  // const handleScroll = (target: any) => {
  //   const scrollLeft: number = target.scrollLeft
  //   const tableHeaders: any = target.parentElement.getElementsByClassName('st-table-header')
  //   if (tableHeaders.length > 0) {
  //     tableHeaders[0].scrollLeft = scrollLeft
  //   }
  // }
  const renderWrapper = () => (<div className={classNames('gzwTableBody')}>
    {
      props.dataSource?.slice(0, 30).map(((value: any, index) => <div id={index + 'tr'} className={classNames('gzwTableTr')} key={index + 'tr'}>
        {
          props?.columns?.map((column, i) => {
            const data = value[column.dataKey]
            return (<React.Fragment key={i + 'frag'}>
              {
                column?.fixed &&
                <div className={classNames('gzwTableTd', 'tdFixed')}
                  key={ i + 'fixed' + index }
                  style={{ minWidth: `${column?.width}px` || 'auto', width: `${column?.width}px` || 'auto', textAlign: column?.align || 'left' }}
                >
                  {
                    column.render ? column.render(data, value, i) : data
                  }
                </div>
              }
              <div className={classNames('gzwTableTd')}
                key={ i + 'td' + index }
                style={{ minWidth: `${column?.width}px` || 'auto', width: `${column?.width}px` || 'auto', textAlign: column?.align || 'left' }}
              >
                {
                  column.render ? column.render(data, value, i) : data
                }
              </div>
            </React.Fragment>)
          })
        })
      </div>))
    }
  </div>)
  const renderHeader = () => props.columns?.map((value, index) => (
    <React.Fragment >
      {value?.fixed &&
      <div
        className={classNames('gzwTableTd', 'tdFixed')}
        style={{ minWidth: `${value?.width}px` || 'auto', width: `${value?.width}px` || 'auto', textAlign: value?.align || 'left' }}
        key={index + 'th'}>
        {
          value?.title
        }
      </div>}
      <div
        className={classNames('gzwTableTd')}
        style={{ minWidth: `${value?.width}px` || 'auto', width: `${value?.width}px` || 'auto', textAlign: value?.align || 'left' }}
        key={index + 'th'}>
        {
          value?.title
        }
      </div>
    </React.Fragment>
  ))
  return (
    <div className={classNames('gzwTableLazy', props?.className)} style={{ ...style, width: maxWidth || '100%' }}>
      <div className={classNames('gzwTableHeader')}>
        {
          renderHeader()
        }
      </div>
      {
        renderWrapper()
      }
    </div>
  )
}

export default ScrollableTable
